import React,{useEffect}  from "react";
import * as img from "../assets/image"  
import {useNavigate} from "react-router-dom"
import {sendMessage} from "./utils"
import Store from "./store"
import {IShop} from "./type"
import { Toast } from "antd-mobile";
export default function Product(){
    const {store} = Store.useContainer()
    const {shopList,shopChanged} = store
  
    const navigate = useNavigate()
    const onGoBack = ()=>{
        navigate(-1)
    }
    const onBuy = async (id:number)=>{
         try{
            await sendMessage({func:"buy",data:{ShopID:id}})
         }catch(e:any){
            Toast.show(e) 
         }
    }
    
    useEffect(()=>{
        if(shopChanged){
            sendMessage({func:"getShops"})
        }
    },[shopChanged])
   
    return <div className="product_bg">
          <div className="product_header">
          <img className="product_back" onClick={onGoBack} src={img.icon_arrow_zuo} />
             <div className="product_title">VIP</div>
           <div className="product_rest"></div>
           
          </div>
          
          <div className="product_list" >
          
           {shopList?.map((res:IShop)=>{
               return  <div className="product_list_item" key={res.ProductId}>
               <div className="product_item_title">{res.Title}</div>
               <ul className="product_item_list">
                   <li>{res.Desc1}</li>
                   <li>{res.Desc2}</li>
                   <li>{res.Desc3}</li>
               </ul>
              <div className="product_item_btn" onClick={()=>onBuy(res.ProductId)}>
               ¥{res.Price}
              </div>
          </div>
           })}
                 
               
          </div>


    </div>
}